<template>
	<div class="wscn-http404-container flex-center">
		<div class="wscn-http404 flex-center height-100">
			<div class="pic-404">
				<img class="pic-404__parent" src="../../assets/404_images/403.png" alt="403" />
				<img class="pic-404__child left" src="../../assets/404_images/404_cloud.png" alt="404" />
				<img class="pic-404__child mid" src="../../assets/404_images/404_cloud.png" alt="404" />
				<img class="pic-404__child right" src="../../assets/404_images/404_cloud.png" alt="404" />
			</div>
			<div class="bullshit">
				<div class="bullshit__oops color-fff">哎呀!进不去了、你暂无权限访问该页面哦!</div>
				<div class="bullshit__info color-fff">
					请联系管理员开放权限
				</div>
				<div style="display: flex;">
					<div class="bullshit__return-home" @click="bankHome">返回首页</div>
					<div class="bullshit__return-home" style="background: #e6a23c;margin-left: 1rem;" @click="bankLogin">
						重新登录
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { useStore } from '@/store/index.js'//引入store
const router = useRouter();
const store = useStore();
// 返回首页
const bankHome = () => {
	router.replace('/')
}
// 跳转登录页
const bankLogin = () => {
	store.setToken('') // 清空token
	router.replace(store.loginPath)
}


</script>

<style lang="scss" scoped>
.wscn-http404-container {
	width: 100%;
	height: 100%;
	background: #003650;
}

.wscn-http404 {
	.pic-404 {
		position: relative;
		float: left;
		width: 37.5rem;
		overflow: hidden;

		&__parent {
			width: 100%;
		}

		&__child {
			position: absolute;

			&.left {
				width: 5rem;
				top: 1.0625rem;
				left: 13.75rem;
				opacity: 0;
				animation-name: cloudLeft;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
				animation-delay: 1s;
			}

			&.mid {
				width: 2.875rem;
				top: 0.625rem;
				left: 26.25rem;
				opacity: 0;
				animation-name: cloudMid;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
				animation-delay: 1.2s;
			}

			&.right {
				width: 3.875rem;
				top: 6.25rem;
				left: 31.25rem;
				opacity: 0;
				animation-name: cloudRight;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
				animation-delay: 1s;
			}

			@keyframes cloudLeft {
				0% {
					top: 1.0625rem;
					left: 13.75rem;
					opacity: 0;
				}

				20% {
					top: 2.0625rem;
					left: 11.75rem;
					opacity: 1;
				}

				80% {
					top: 5.0625rem;
					left: 5.75rem;
					opacity: 1;
				}

				100% {
					top: 6.0625rem;
					left: 3.75rem;
					opacity: 0;
				}
			}

			@keyframes cloudMid {
				0% {
					top: 0.625rem;
					left: 26.25rem;
					opacity: 0;
				}

				20% {
					top: 2.5rem;
					left: 22.5rem;
					opacity: 1;
				}

				70% {
					top: 8.125rem;
					left: 11.25rem;
					opacity: 1;
				}

				100% {
					top: 10rem;
					left: 7.5rem;
					opacity: 0;
				}
			}

			@keyframes cloudRight {
				0% {
					top: 6.25rem;
					left: 31.25rem;
					opacity: 0;
				}

				20% {
					top: 7.5rem;
					left: 28.75rem;
					opacity: 1;
				}

				80% {
					top: 11.25rem;
					left: 21.25rem;
					opacity: 1;
				}

				100% {
					top: 12.5rem;
					left: 18.75rem;
					opacity: 0;
				}
			}
		}
	}

	.bullshit {
		position: relative;
		// width: 18.75rem;
		padding: 1.875rem 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&__oops {
			font-size: 2rem;
			font-weight: bold;
			line-height: 40px;
			opacity: 0;
			margin-bottom: 1.25rem;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
		}

		&__headline {
			font-size: 1.25rem;
			line-height: 1.5rem;
			font-weight: bold;
			opacity: 0;
			margin-bottom: 0.625rem;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-delay: 0.1s;
			animation-fill-mode: forwards;
		}

		&__info {
			font-size: 0.8125rem;
			line-height: 1.3125rem;
			opacity: 0;
			margin-bottom: 1.875rem;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-delay: 0.2s;
			animation-fill-mode: forwards;
		}

		&__return-home {
			display: block;
			width: 6.875rem;
			height: 2.25rem;
			background: #3081fb;
			border-radius: 6.25rem;
			text-align: center;
			color: #ffffff;
			opacity: 0;
			font-size: 0.75rem;
			line-height: 2.25rem;
			cursor: pointer;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-delay: 0.3s;
			animation-fill-mode: forwards;
			text-decoration: none
		}

		@keyframes slideUp {
			0% {
				transform: translateY(3.75rem);
				opacity: 0;
			}

			100% {
				transform: translateY(0);
				opacity: 1;
			}
		}
	}
}
</style>
